﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" Runat="Server">
    <div>
        Please select itmes and click one button
        <br />
        <a href="#" onclick="command('a')">approve</a> <a href="#" onclick="command('d')">deny</a>
        <a href="#" onclick="command('r')">remove</a>
        <div class="PaginationContainer">
        </div>
        <div id="Container">
        </div>
         <textarea id="template" style="display: none">
			<table>
				<tr>
					<th></th>
					<th></th>
					<th onclick="sort('Name')"> Name </th>
					<th onclick="sort('AverageRating')"> Average Rating </th>
					<th onclick="sort('Dvd.Available')"> DVD Available </th>
					<th onclick="sort('DateModified')"> Modified </th>
					<th></th>
					<th></th>
				</tr>
				{#foreach $T as d}
				<tr class="{#cycle values=['odd','even']}">
					<td> {$T.d$index + 1} </td>
					<td><img style="height: 75px;" src="{$T.d.__metadata.media_src}" /></td>
					<td> {$T.d.Name} </td>
					<td class="number"> 
						  {#if $T.d.AverageRating < 2} <span style="color: Red">{$T.d.AverageRating}</span> {#elseif $T.d.AverageRating
                        < 3} <span style="color: Orange">{$T.d.AverageRating}</span> {#else} {$T.d.AverageRating} {#/if}
					</td>
					<td> {$T.d.Dvd.Available ? 'Y' : 'N'} </td>
					<td> {$d.datetime.format($T.d.DateModified, "MMM/dd/yyyy")} </td>
					<td><a href="#" onclick="updating('{$T.d.Id}')">update</a></td>
					<td><a href="#" onclick="deleting('{$T.d.Id}')">delete</a></td>
				</tr>
				{#/for}
			</table>
		</textarea>
        <div class="PaginationContainer">
        </div>
        <br style="clear:both"/>
    </div>
    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/databind.js"></script>
    <script type="text/javascript" src="../jQueryClient/jTemplates.js"></script>
    <script type="text/javascript" src="../jQueryClient/pagination.js"></script>
    <link rel="stylesheet" href="../css/pagination.css" />
    <script type="text/javascript" src="../jQueryClient/dataformat.js"></script>
    <script type="text/javascript" src="../jQueryClient/datejs.js"></script>
    <script type="text/javascript">
        $(function () { 
         $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
            dataType: "jsonp",
            callback: function (data) {
                $("#Container").dataBind($("#template").text(), data.d, {
                    //show pageination in .PaginationContainer
                    page_container: '.PaginationContainer',
                    empty_text: '<span style="color:Red;">No data in the data source.</span>',
                    page_size: 3,
                    page_animation: 'fadein'
                });
            }
        });
        });
       

        function selectall() {
            if ($("#Container .selectall").is(":checked"))
                $("#Container .checkbox").attr("checked", "checked");
            else
                $("#Container .checkbox").removeAttr("checked");
        }

        function command(c) {
            var selected = [];
            $("#Container .checkbox:checked").each(function () {
                selected.push($(this).next().val());
            });

            $.doPostback("Command", { command: c, items: selected }, {
                callback: function () {
                    $("#Container").trigger("suspend", true);

                    var items = [];
                    switch (c) {
                        case "a":
                        case "d":
                            for (var i = 0; i < selected.length; i++) {
                                var obj = new Object();
                                obj.ID = selected[i];
                                obj.Approved = c == 'a';
                                $("#Container").trigger("update", obj);
                            }
                            break;
                        case "r":
                            for (var i = 0; i < selected.length; i++) {
                                $("#Container").trigger("delete", selected[i]);
                            }
                            break;
                    }

                    $("#Container").trigger("suspend", false);
                }
            });
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" Runat="Server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" Runat="Server">
</asp:Content>

